<template>
  <div class="email-container">
    <div class="transfer-item">
      <div class="title">{{title}}</div>
      <div class="mt-12">
        <div class="sub-title">可选</div>

        <a-transfer
          :data-source="ataList"
          :titles="['', '']"
          :render="(item) => item.name"
          :target-keys="targetKeys"
          :selected-keys="selectedKeys"
          :list-style="{
            width: '50%',
            height: '180px',
          }"
          @change="handleChange"
          @selectChange="handleSelectChange"
        />
      </div>
    </div>

    <div class="title mt-12">
      Fault Items to Monitor-one or more Fault Items below MUST be enabled to activate ATA-based triggering of emails
    </div>

    <div class="d-flex flex-column w-100">
      <div class="mb-8 text-colort-505363 mt-8">Flightt Deck Effects</div>
      <div class="email-ata-item-box">
        <a-form-model
          ref="ruleForm"
        >

          <a-row :gutter="16" class="pl-16 ">
            <a-col :span="2" class="mt-20 mr-16" style="width:110px">
              <a-form-model-item class="check-order " style="margin-bottom:12px">
                <a-checkbox v-model="fdeEnable">
                  Enable
                </a-checkbox>
              </a-form-model-item>

              <a-form-model-item class="check-order">
                <a-checkbox v-model="fdeEStop">
                  ETOPS
                </a-checkbox>
              </a-form-model-item>
            </a-col>

            <a-col :span="4" class="mt-12">
              <a-form-model-item class="check-order2">
                <div class="mb-10 text-color-505363 fs-14">Priority{{ fdePriority }}</div>
                <a-select v-model="fdePriority" placeholder="Priority" style="width: 100%" :disabled="!fdeEnable">
                  <a-select-option v-for="(item,index) in selectionList" :key="index" :value="item">
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>

            </a-col>
            <a-col :offset="4" :span="5" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Activity</div>
                <a-row>
                  <a-checkbox-group v-model="fdeActivity" :disabled="!fdeEnable">
                    <a-col :span="8">
                      <a-checkbox value="Active">
                        Active
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="Inactive">
                        Inactive
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="Latched">
                        Latched
                      </a-checkbox>
                    </a-col>
                  </a-checkbox-group>

                </a-row>
              </a-form-model-item>

            </a-col>
            <a-col :offset="2" :span="5" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Detected in</div>
                <a-row>
                  <a-checkbox-group v-model="fdeDetectedIn" :disabled="!fdeEnable">
                    <a-col :span="8">
                      <a-checkbox value="RTE">
                        RTE
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="PLF">
                        PLF
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="EF">
                        EF
                      </a-checkbox>
                    </a-col>
                  </a-checkbox-group>

                </a-row>
              </a-form-model-item>

            </a-col>
          </a-row>
        </a-form-model>
      </div>

    </div>
    <div class="d-flex flex-column w-100">
      <div class="mb-8 text-colort-505363 mt-8">Maintenance Memos</div>
      <div class="email-ata-item-box">
        <a-form-model
          ref="ruleForm"
        >

          <a-row :gutter="16" class="pl-16 ">
            <a-col :span="3" class="mt-20 mr-16" style="width:110px">
              <a-form-model-item class="check-order " style="margin-bottom:12px">
                <a-checkbox v-model="mmoEnable">
                  Enable{{ mmoEnable }}
                </a-checkbox>
              </a-form-model-item>

            </a-col>

            <a-col :span="4" class="mt-12">
              <a-form-model-item class="check-order2">
                <div class="mb-10 text-color-505363 fs-14">Priority</div>
                <a-select v-model="mmoPriority" placeholder="请选择" :disabled="!mmoEnable" style="width: 100%">
                  <a-select-option v-for="(item,index) in selectionList" :key="index" :value="item">
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>

            </a-col>
            <a-col :offset="4" :span="5" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Activity</div>
                <a-row>
                  <a-checkbox-group v-model="mmoActivity" :disabled="!mmoEnable">
                    <a-col :span="8">
                      <a-checkbox value="Active">
                        Active
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="Inactive">
                        Inactive
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="Latched">
                        Latched
                      </a-checkbox>
                    </a-col>
                  </a-checkbox-group>
                </a-row>
              </a-form-model-item>

            </a-col>
            <a-col :offset="2" :span="5" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Detected in</div>
                <a-row>
                  <a-checkbox-group v-model="mmoDetectedIn" :disabled="!mmoEnable">
                    <a-col :span="8">
                      <a-checkbox value="RTE">
                        RTE
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="PLF">
                        PLF
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="EF">
                        EF
                      </a-checkbox>
                    </a-col>
                  </a-checkbox-group>

                </a-row>
              </a-form-model-item>

            </a-col>
          </a-row>
        </a-form-model>
      </div>

    </div>

    <div class="d-flex flex-column w-100">
      <div class="mb-8 text-colort-505363 mt-8">Scheduled Maintenance Tasks</div>
      <div class="email-ata-item-box">
        <a-form-model
          ref="ruleForm"
        >

          <a-row :gutter="16" class="pl-16 ">
            <a-col :span="3" class="mt-20 mr-16" style="width:110px">
              <a-form-model-item class="check-order " style="margin-bottom:12px">
                <a-checkbox v-model="smtEnable">
                  Enable{{ smtEnable }}
                </a-checkbox>
              </a-form-model-item>

            </a-col>

            <a-col :span="4" class="mt-12">
              <a-form-model-item class="check-order2">
                <div class="mb-10 text-color-505363 fs-14">Priority</div>
                <a-select v-model="smtPriority" placeholder="请选择" :disabled="!smtEnable" style="width: 100%">
                  <a-select-option v-for="(item,index) in selectionList" :key="index" :value="item">
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>

            </a-col>
            <a-col :offset="4" :span="5" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Activity</div>
                <a-row>
                  <a-checkbox-group v-model="smtActivity" :disabled="!smtEnable">
                    <a-col :span="8">
                      <a-checkbox value="Active">
                        Active
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="Inactive">
                        Inactive
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="Latched">
                        Latched
                      </a-checkbox>
                    </a-col>
                  </a-checkbox-group>
                </a-row>
              </a-form-model-item>

            </a-col>
            <a-col :offset="2" :span="5" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Detected in</div>
                <a-row>
                  <a-checkbox-group v-model="smtDetectedIn" :disabled="!smtEnable">
                    <a-col :span="8">
                      <a-checkbox value="RTE">
                        RTE
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="PLF">
                        PLF
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="EF">
                        EF
                      </a-checkbox>
                    </a-col>
                  </a-checkbox-group>

                </a-row>
              </a-form-model-item>

            </a-col>
          </a-row>
        </a-form-model>
      </div>

    </div>

    <div class="d-flex flex-column w-100">
      <div class="mb-8 text-colort-505363 mt-8">Correlated MMSGs</div>
      <div class="email-ata-item-box">
        <a-form-model
          ref="ruleForm"
        >

          <a-row :gutter="16" class="pl-16 ">
            <a-col :span="3" class="mt-20 mr-16" style="width:110px">
              <a-form-model-item class="check-order " style="margin-bottom:12px">
                <a-checkbox v-model="mmsgEnable">
                  Enable
                </a-checkbox>
              </a-form-model-item>

            </a-col>

            <a-col :span="4" class="mt-12">
              <a-form-model-item class="check-order2">
                <div class="mb-10 text-color-505363 fs-14">Priority</div>
                <a-select v-model="cmmsgPriority" placeholder="请选择" style="width: 100%" :disabled="!mmsgEnable">
                  <a-select-option v-for="(item,index) in selectionList" :key="index" :value="item">
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>

            </a-col>
            <a-col :offset="0" :span="5" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Activity</div>
                <a-row>
                  <a-checkbox-group v-model="cmmsgActivity" :disabled="!mmsgEnable">
                    <a-col :span="8">
                      <a-checkbox value="Active">
                        Active
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="Inactive">
                        Inactive
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="Latched">
                        Latched
                      </a-checkbox>
                    </a-col>
                  </a-checkbox-group>
                </a-row>
              </a-form-model-item>

            </a-col>
            <a-col :offset="1" :span="5" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Activity of 'parent' fault</div>
                <a-row>
                  <a-checkbox-group v-model="cmmsgActivityParentFault" :disabled="!mmsgEnable">
                    <a-col :span="8">
                      <a-checkbox value="Active">
                        Active
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value=" Inactive">
                        Inactive
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value=" Latched">
                        Latched
                      </a-checkbox>
                    </a-col>
                  </a-checkbox-group>

                </a-row>
              </a-form-model-item>

            </a-col>
            <a-col :offset="1" :span="5" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Detected in</div>
                <a-row>
                  <a-checkbox-group v-model="cmmsgDetectedIn" :disabled="!mmsgEnable">
                    <a-col :span="8">
                      <a-checkbox value="RTE">
                        RTE
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="PLF">
                        PLF
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="EF">
                        EF
                      </a-checkbox>
                    </a-col>
                  </a-checkbox-group>

                </a-row>
              </a-form-model-item>

            </a-col>
          </a-row>
        </a-form-model>
      </div>

    </div>
    <div class="d-flex flex-column w-100">
      <div class="mb-8 text-colort-505363 mt-8">Non-correlated Maintenance Message(Nuisances)</div>
      <div class="email-ata-item-box">
        <a-form-model
          ref="ruleForm"
        >

          <a-row :gutter="16" class="pl-16 ">
            <a-col :span="3" class="mt-20 mr-16" style="width:110px">
              <a-form-model-item class="check-order " style="margin-bottom:12px">
                <a-checkbox v-model="nonEnable">
                  Enable
                </a-checkbox>
              </a-form-model-item>

            </a-col>

            <a-col :span="4" class="mt-12">
              <!-- <a-form-model-item class="check-order2">
                <div class="mb-10 text-color-505363 fs-14">Priority</div>
                <a-select v-model="nonCorrNuisancePriority" placeholder="请选择" style="width: 100%" :disabled="!nonEnable">
                  <a-select-option v-for="(item,index) in selectionList" :key="index" :value="item">
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item> -->

            </a-col>
            <a-col :offset="4" :span="5" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Activity</div>
                <a-row>
                  <a-checkbox-group v-model="nonCorrNuisanceActivity" :disabled="!nonEnable">
                    <a-col :span="8">
                      <a-checkbox value="Active">
                        Active
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="Inactive">
                        Inactive
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="Latched">
                        Latched
                      </a-checkbox>
                    </a-col>
                  </a-checkbox-group>
                </a-row>
              </a-form-model-item>

            </a-col>
            <!-- <a-col :offset="2" :span="5" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Detected in</div>
                <a-row>
                  <a-checkbox-group v-model="nonCorrNuisanceDetectedIn" :disabled="!nonEnable">
                    <a-col :span="8">
                      <a-checkbox value="RTE">
                        RTE
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="PLF">
                        PLF
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="EF">
                        EF
                      </a-checkbox>
                    </a-col>
                  </a-checkbox-group>

                </a-row>
              </a-form-model-item>

            </a-col> -->
          </a-row>
        </a-form-model>
      </div>

    </div>
    <div class="d-flex flex-column w-100">
      <div class="mb-8 text-colort-505363 mt-8">Alert-System</div>
      <div class="email-ata-item-box">
        <a-form-model
          ref="ruleForm"
        >

          <a-row :gutter="16" class="pl-16 ">
            <a-col :span="3" class="mt-20 mr-16" style="width:110px">
              <a-form-model-item class="check-order " style="margin-bottom:12px">
                <a-checkbox v-model="alertEnable">
                  Enable
                </a-checkbox>
              </a-form-model-item>

            </a-col>

            <a-col :span="4" class="mt-12">
              <a-form-model-item class="check-order2">
                <div class="mb-10 text-color-505363 fs-14">Priority</div>
                <a-select v-model="alertSystemPriority" placeholder="请选择" style="width: 100%" :disabled="!alertEnable">
                  <a-select-option v-for="(item,index) in selectionList" :key="index" :value="item">
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>

            </a-col>
            <!-- <a-col :offset="4" :span="5" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Activity</div>
                <a-row>
                  <a-checkbox-group v-model="alertSystemActivity" :disabled="!alertEnable">
                    <a-col :span="8">
                      <a-checkbox value="Active">
                        Active
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="Inactive">
                        Inactive
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="Latched">
                        Latched
                      </a-checkbox>
                    </a-col>
                  </a-checkbox-group>

                </a-row>
              </a-form-model-item>

            </a-col>
            <a-col :offset="2" :span="5" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Detected in</div>
                <a-row>
                  <a-checkbox-group v-model="alertSystemDetectedIn" :disabled="!alertEnable">
                    <a-col :span="8">
                      <a-checkbox value="RTE">
                        RTE
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="PLF">
                        PLF
                      </a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="EF">
                        EF
                      </a-checkbox>
                    </a-col>
                  </a-checkbox-group>

                </a-row>
              </a-form-model-item>

            </a-col> -->
          </a-row>
        </a-form-model>
      </div>

    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex';
export default {
  props:{
    title:String
  },
  data() {
    return {
      targetKeys: [],
      selectedKeys: [],
      selectionList: ['All', 'High only', 'High and Medium only', 'High, Medium and Low only']
    };
  },
  computed: {
    ...mapState('emailNotification', ['ataList', 'notificationService', 'notificationFaultltem']),
    fdeEnable: {
      get() {
        return !!this.notificationFaultltem.fdeEnable;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, fdeEnable: v ? 1 : 0 }}); // 0是选中 1未选中
      }
    },
    mmoEnable: {
      get() {
        return !!this.notificationFaultltem.mmoEnable;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, mmoEnable: v ? 1 : 0 }}); // 0是选中 1未选中
      }
    },
    smtEnable: {
      get() {
        return !!this.notificationFaultltem.smtEnable;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, smtEnable: v ? 1 : 0 }}); // 0是选中 1未选中
      }
    },
    mmsgEnable: {
      get() {
        return !!this.notificationFaultltem.cmmsgEnable;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, cmmsgEnable: v ? 1 : 0 }}); // 0是选中 1未选中
      }
    },
    nonEnable: {
      get() {
        return !!this.notificationFaultltem.nonCorrNuisanceEnable;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, nonCorrNuisanceEnable: v ? 1 : 0 }}); // 0是选中 1未选中
      }
    },
    alertEnable: {
      get() {
        return !!this.notificationFaultltem.alertSystemEnable;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, alertSystemEnable: v ? 1 : 0 }}); // 0是选中 1未选中
      }
    },
    fdeEStop: {
      get() {
        return !!this.notificationFaultltem.fdeEtops;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, fdeEtops: v ? 1 : 0 }});
      }
    },
    // activity
    fdeActivity: {
      get() {
        return this.notificationFaultltem.fdeActivity;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, fdeActivity: v }});
      }
    },
    mmoActivity: {
      get() {
        return this.notificationFaultltem.mmoActivity;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, mmoActivity: v }});
      }
    },
    smtActivity: {
      get() {
        return this.notificationFaultltem.smtActivity;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, smtActivity: v }});
      }
    },
    cmmsgActivity: {
      get() {
        return this.notificationFaultltem.cmmsgActivity;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, cmmsgActivity: v }});
      }
    },
    nonCorrNuisanceActivity: {
      get() {
        return this.notificationFaultltem.nonCorrNuisanceActivity;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, nonCorrNuisanceActivity: v }});
      }
    },
    alertSystemActivity: {
      get() {
        return this.notificationFaultltem.alertSystemActivity;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, alertSystemActivity: v }});
      }
    },
    // Priority
    fdePriority: {
      get() {
        return this.notificationFaultltem.fdePriority;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, fdePriority: v }});
      }
    },
    mmoPriority: {
      get() {
        return this.notificationFaultltem.mmoPriority;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, mmoPriority: v }});
      }
    },
    smtPriority: {
      get() {
        return this.notificationFaultltem.smtPriority;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, smtPriority: v }});
      }
    },
    cmmsgPriority: {
      get() {
        return this.notificationFaultltem.cmmsgPriority;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, cmmsgPriority: v }});
      }
    },
    nonCorrNuisancePriority: {
      get() {
        return this.notificationFaultltem.nonCorrNuisancePriority;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, nonCorrNuisancePriority: v }});
      }
    },
    alertSystemPriority: {
      get() {
        return this.notificationFaultltem.alertSystemPriority;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, alertSystemPriority: v }});
      }
    },
    // Detected
    fdeDetectedIn: {
      get() {
        return this.notificationFaultltem.fdeDetectedIn;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, fdeDetectedIn: v }});
      }
    },
    mmoDetectedIn: {
      get() {
        return this.notificationFaultltem.mmoDetectedIn;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, mmoDetectedIn: v }});
      }
    },
    smtDetectedIn: {
      get() {
        return this.notificationFaultltem.smtDetectedIn;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, smtDetectedIn: v }});
      }
    },
    cmmsgDetectedIn: {
      get() {
        return this.notificationFaultltem.cmmsgDetectedIn;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, cmmsgDetectedIn: v }});
      }
    },
    nonCorrNuisanceDetectedIn: {
      get() {
        return this.notificationFaultltem.nonCorrNuisanceDetectedIn;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, nonCorrNuisanceDetectedIn: v }});
      }
    },
    alertSystemDetectedIn: {
      get() {
        return this.notificationFaultltem.alertSystemDetectedIn;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, alertSystemDetectedIn: v }});
      }
    },
    cmmsgActivityParentFault: {
      get() {
        return this.notificationFaultltem.cmmsgActivityParentFault;
      },
      set(v) {
        this.setState({ key: 'notificationFaultltem', payload: { ...this.notificationFaultltem, cmmsgActivityParentFault: v }});
      }
    }
  },
  mounted() {
    const emailRow = JSON.parse(localStorage.getItem('emailRow') ?? '{}');

    if (Object.values(emailRow)?.length > 0) {
      const newData = [...emailRow.ataTitles];
      newData.forEach(item => {
        item.nameF = item.name;
        if (item.name.split('-')[0] !== item.ataId) {
          item.nameF = item.ataId + '-' + item.name;
        }
      });
      this.targetKeys = newData.flatMap(item => item.nameF);
    }
  },
  methods: {
    ...mapActions('emailNotification', ['getAtaListAll']),
    ...mapMutations('emailNotification', ['setState']),
    handleChange(nextTargetKeys, direction, moveKeys) {
      const listRows = nextTargetKeys.map(item => {
        return this.ataList.find(allItem => {
          return item === allItem.name || (allItem.ataId + '-' + item) === allItem.name || item === (allItem.ataId + '-' + allItem.name);
        });
      });
      this.targetKeys = nextTargetKeys;
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, ataTitles: listRows }});
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, ataTitlesKeys: nextTargetKeys } });
    },
    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];
    }
  }
};
</script>

<style>

</style>
